<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<script src="https://unpkg.com/vue@3"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-plus"></script>
	<!-- axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<title>Users</title>
</head>

<body>
	<div id="app" align="center">
		<el-table :data="tableData" border stripe style="width: 60%">
			<el-table-column prop="userName" label="用户名" align="center" width="180"></el-table-column>
			<el-table-column prop="age" label="年龄" align="center" width="180"></el-table-column>
			<el-table-column prop="desc" label="描述" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
			<el-table-column label="Link" width="180" align="center">
				<template #default="scope">
					<el-button @click.stop="openLink(scope.row)" size="small" type="success">openLink</el-button>
				</template>
			</el-table-column>
		</el-table>
		<h2>springBoot interval: {{msg1}}</h2>
		<h2>spring 2.4-  pubsub: {{msg2}}</h2>
		<h2>spring 2.4+   sinks: {{msg3}}</h2>
	</div>
	<script>
		const App = {
			data() {
				return {
					tableData: [],
					msg1: null,
					msg2: null,
					msg3: null
				};
			},
			mounted() {

				//基于WebMVC 实现
				let eventSource = new EventSource("/mvc/sse/connect");
				eventSource.onmessage = (event) => {
					this.tableData = eval(event.data);
				};

				//基于定时器实现 SSE 推送
				let interval = new EventSource("/interval/stream");
				interval.onmessage = (event) => {
					this.msg1 = event.data;
				};

				//Spring Boot 2.4 之前版本,基于发布订阅模式实现 SSE 推送
				let pubsub = new EventSource("/pubsub/stream");
				pubsub.onmessage = (event) => {
					this.msg2 = event.data;
				};

				//Spring Boot 2.4 及之后版本,基于发布订阅模式实现 SSE 推送
				let sinks = new EventSource("/sinks/stream");
				sinks.onmessage = (event) => {
					this.msg3 = event.data;
				};
			},
			methods: {
				openLink(row) {
					console.log("openLink for " + row.userName);
				}
			}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.mount("#app");
	</script>
</body>